import 'package:flutter/material.dart';
import 'package:flutter_components_web/components/shared/com_button.dart';
import 'package:flutter_components_web/utils/responsive.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../shared/com_fade_in.dart';
import '../shared/com_printing_text.dart';

class ComAnimationPage extends StatefulWidget {
  const ComAnimationPage({super.key});

  @override
  State<ComAnimationPage> createState() => _ComAnimationPageState();
}

class _ComAnimationPageState extends State<ComAnimationPage> {
  final text =
      "SR Impact provides direct, discreet support to leaders and their teams to deliver effective, lasting change";
  final text01 =
      "From idea to strategy.\nFrom sketch to investor pitch."
      "\nFrom the 'chaos of doing' to delivering a vision";
  final text02 =
      "Our focused support to leaders makes a huge difference. especially "
      "during fast growth phases.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: EdgeInsets.only(bottom: 100.r),
        children: [_buildHeaderPage(), _buildContentPage(), _buildFooterPage()],
      ),
    );
  }

  _buildHeader() {
    final tS = TextStyle(color: Colors.white70);
    return Container(
      height: 50.r,
      padding: EdgeInsets.symmetric(horizontal: 10.r),
      decoration: BoxDecoration(border: Border.all(color: Colors.white60)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded(
            flex: 1,
            child: Container(
              alignment: Alignment.centerLeft,
              height: 50.r,
              decoration: BoxDecoration(
                border: Border(right: BorderSide(color: Colors.white60)),
              ),
              child: Text("SR Impact", style: TextStyle(color: Colors.white70)),
            ),
          ),
          headerMenuShow
              ? Expanded(
                flex: 4,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("About us", style: tS),
                    Text("Services", style: tS),
                    Text("Clients", style: tS),
                    Text("For Startups", style: tS),
                  ],
                ),
              )
              : Container(),
          Expanded(
            flex: 1,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                ComButton(
                  text: "Contact us",
                  textColor: Colors.black,
                  bgColor: Color.fromRGBO(223, 213, 199, 1),
                  borderRadius: 3,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 首页
  _buildHeaderPage() {
    return Stack(
      children: [
        // 封面
        _buildCover(
          delay: Duration(seconds: 0),
          imageHeight: headerCoverHeight.r,
        ),
        // 头部
        _buildHeader(),
        // 标题
        _buildTitle(),
        // 分割线
        _buildLine(),
        // 底部描述
        _buildPositionDesc(),
      ],
    );
  }

  Widget _buildCover({
    double? width,
    required Duration delay,
    required double imageHeight,
    bool enableClip = false,
  }) {
    return ClipRRect(
      borderRadius:
          enableClip ? BorderRadius.circular(10.r) : BorderRadius.circular(0),
      child: ComFadeIn(
        delay: delay,
        child: Image.asset(
          "assets/images/sample.jpeg",
          fit: BoxFit.cover,
          width: width ?? 1.sw,
          height: imageHeight,
        ),
      ),
    );
  }

  _buildTitle() {
    return Positioned(
      left: 20.r,
      top: 80.r,
      child: ComFadeIn(
        child: SizedBox(
          width: 230.r,
          child: Text(
            "Empowering Leaders for Lasting Change",
            style: TextStyle(fontSize: 25.r, color: Colors.white70, height: 1),
          ),
        ),
      ),
    );
  }

  _buildPositionDesc() {
    return Positioned(
      right: 0,
      bottom: (headerCoverHeight / 10).r,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.r),
        width: 1.sw,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              "Position",
              style: TextStyle(fontSize: 12.r, color: Colors.white70),
            ),
            SizedBox(
              height: 75.r,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    width: headerDescWidth.r,
                    child: ComPrintingText(
                      text: text,
                      textColor: Colors.white70,
                      textSize: 11.r,
                      delay: Duration(milliseconds: 1100),
                    ),
                  ),
                  Row(
                    children: [
                      ComFadeIn(
                        delay: Duration(seconds: 2),
                        child: ComButton(
                          text: "Contact us",
                          textColor: Colors.black,
                          bgColor: Color.fromRGBO(223, 213, 199, 1),
                          borderRadius: 3,
                        ),
                      ),
                      10.horizontalSpace,
                      ComFadeIn(
                        delay: Duration(milliseconds: 3000),
                        child: ComButton(
                          text: "Contact us",
                          textColor: Color.fromRGBO(223, 213, 199, 1),
                          bgColor: Colors.transparent,
                          enableBorder: true,
                          borderRadius: 3,
                          borderColor: Color.fromRGBO(223, 213, 199, 1),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  _buildLine() {
    return Positioned(
      left: 0,
      bottom: (headerCoverHeight / 2.5).r,
      child: Container(color: Colors.white38, height: 1.r, width: 1.sw),
    );
  }

  _buildContentPage() {
    return SizedBox(
      height: 430.r,
      child: Stack(
        children: [
          Positioned(
            right: 0,
            child: _buildCover(
              width: 0.5.sw,
              delay: Duration(seconds: 7),
              imageHeight: 300.r,
            ),
          ),
          Positioned(
            left: 20.r,
            top: 80.r,
            child: ComFadeIn(
              delay: Duration(seconds: 4),
              child: Text(
                "Our mission statement",
                style: TextStyle(
                  fontSize: 10.r,
                  color: Colors.black54,
                  height: 1,
                ),
              ),
            ),
          ),
          Positioned(
            left: 20.r,
            top: 100.r,
            child: SizedBox(
              width: headerDescWidth.r,
              child: ComPrintingText(
                delay: Duration(seconds: 5),
                text: text01,
                textColor: Colors.black,
                textSize: 12.r,
                maxLines: 4,
              ),
            ),
          ),
          Positioned(
            left: 20.r,
            top: 210.r,
            child: ComFadeIn(
              delay: Duration(seconds: 6),
              child: ComButton(
                text: "Read more",
                textColor: Colors.black,
                bgColor: Colors.transparent,
                borderRadius: 3,
                enableBorder: true,
                borderColor: Colors.black26,
              ),
            ),
          ),
          Positioned(
            top: 330.r,
            left: 0,
            child: SizedBox(
              width: 1.sw,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  _buildLabelBlock(
                    "14",
                    "Office locations",
                    Duration(seconds: 8),
                  ),
                  _buildLabelBlock("89", "Awards won", Duration(seconds: 9)),
                  _buildLabelBlock(
                    "450+",
                    "Propheteers",
                    Duration(seconds: 10),
                  ),
                  _buildLabelBlock(
                    "22k",
                    "Hours donated",
                    Duration(seconds: 11),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  _buildLabelBlock(String t, String s, Duration delay) {
    return ComFadeIn(
      delay: delay,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(t, style: TextStyle(fontSize: 18.r, color: Colors.black)),
          Text(s, style: TextStyle(fontSize: 11.r, color: Colors.black54)),
        ],
      ),
    );
  }

  _buildFooterPage() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 30.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ComFadeIn(
            delay: Duration(seconds: 11),
            child: SizedBox(
              width: 230.r,
              child: Text(
                "What we help",
                style: TextStyle(
                  fontSize: 20.r,
                  color: Colors.black,
                  height: 1,
                ),
              ),
            ),
          ),
          10.verticalSpace,
          SizedBox(
            width: headerDescWidth.r,
            child: ComPrintingText(
              delay: Duration(seconds: 12),
              text: text02,
              textColor: Colors.black,
              textSize: 9.r,
              maxLines: 2,
            ),
          ),
          20.verticalSpace,
          Wrap(
            spacing: 20.r,
            runSpacing: 20.r,
            children: [
              _buildImageBlock(
                "People, order design \nways of working",
                Duration(seconds: 13),
              ),
              _buildImageBlock(
                "Culture, Mentoring & \nDevelopment",
                Duration(seconds: 14),
              ),
            ],
          ),
        ],
      ),
    );
  }

  _buildImageBlock(String s, Duration delay) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildCover(
          delay: delay,
          imageHeight: footerCoverHeight.r,
          width: footerCoverHeight.r,
          enableClip: true,
        ),
        10.verticalSpace,
        ComFadeIn(
          delay: delay,
          child: Text(
            s,
            style: TextStyle(fontSize: 13.r, color: Colors.black, height: 1),
          ),
        ),
      ],
    );
  }

  /// 超级变变变
  bool get headerMenuShow =>
      context.responsive(false, sm: true, md: true, lg: true, xl: true);

  double get headerCoverHeight =>
      context.responsive(300, sm: 350, md: 400, lg: 450, xl: 500);

  double get footerCoverHeight => context.responsive(
    1.sw,
    ssm: 1.sw,
    sm: 120.r,
    md: 120.r,
    lg: 120.r,
    xl: 120.r,
  );

  double get headerDescWidth =>
      context.responsive(200, sm: 250, md: 300, lg: 350, xl: 400);
}
